var primaryMouseIsDown = false;
var secondaryMouseIsDown = false;
var mouseIsHovering = false;

document.addEventListener('DOMContentLoaded', function() {
	determineLocation();
	document.getElementById('saveButton').addEventListener('click', storeDomain);
	document.getElementById('removeButton').addEventListener('click', removeDomain);
	document.getElementById('cancelButton').addEventListener('click', function(){window.close()});
	drawColorBar();
	activateDrag('primaryDragContainer', 'primaryDragPointer', 'primaryColorBar');
	activateDrag('secondaryDragContainer', 'secondaryDragPointer', 'secondaryColorBar');
});

function activateDrag(elementId, dragger, colorBar) {
	var mouseToTrack;
	var intForReference;
	var actualColorBar = colorBar;
	if (colorBar = 'primaryColorBar') {
		mouseToTrack = primaryMouseIsDown;
		intForReference = 1;
	} else {
		mouseToTrack = secondaryMouseIsDown;
		intForReference = 2;
	}
	document.getElementById(elementId).addEventListener('mousedown', function(e) {
		mouseToTrack = true;
		if (e.offsetX > 40 && e.offsetX < 555) {
			document.getElementById(dragger).style.left = e.offsetX + "px";
			var fakeEvent = document.createEvent('MouseEvents');
			var xoff = e.offsetX < 552 ? e.offsetX + 5 : e.offsetX;
			fakeEvent.initMouseEvent('click', true, true, window, 0, 0, 0, xoff, e.offSetY, false, false, false, false, intForReference, null); 
			document.getElementById(actualColorBar).dispatchEvent(fakeEvent);		
		}
	});
	document.body.addEventListener('mouseup', function(e) {
		mouseToTrack = false;
	});
	document.body.addEventListener('mousemove', function(e) {
		if (mouseToTrack && e.offsetX > 40 && e.offsetX < 555) {
			document.getElementById(dragger).style.left = e.offsetX + "px";
			var fakeEvent = document.createEvent('MouseEvents');
			var xoff = e.offsetX < 552 ? e.offsetX + 5 : e.offsetX;
			fakeEvent.initMouseEvent('click', true, true, window, 0, 0, 0, xoff, e.offSetY, false, false, false, false, intForReference, null); 
			document.getElementById(actualColorBar).dispatchEvent(fakeEvent);
		}
	});
}

function determineLocation() {
	chrome.tabs.getSelected(null, function(tab) {
		chrome.tabs.sendMessage(tab.id, {requestType: "domain"}, function(response) {
			var url = tab.url.toString();
			if (url.substr(0, 4).toLowerCase() != 'http' || url.substr(0, 21) == 'https://chrome.google') {
				document.getElementById('content').style.display = "none";
				document.getElementById('domainText').innerHTML = "'" + tab.url + "'<br/><br/>" +
				 " Unforunately, this url is not in a domain that Test Assured is able to access <br/><br/>" +
				 "<img src='/images/invalidUrl.png'></img>";
			} else {
				document.getElementById('domainText').innerHTML = response.domainName;
			}
		});		
	});
	
}

function isAlreadySaved() {
	var savedColor = "#FF0000";
	chrome.tabs.getSelected(null, function(tab) {
		chrome.tabs.sendMessage(tab.id, {requestType: "isSaved"}, function(response) {
			if (response.isSaved == 'true') {
				updateColorDisplay(response.savedColor);
				updateSecondaryColorBar(response.alertPrimaryColor);
				document.getElementById('alertBorderWidthInput').value = response.savedBorderWidth;
				document.getElementById('primaryDragPointer').style.left = response.alertPx;
				document.getElementById('secondaryDragPointer').style.left = response.alertPy;
			}
		});
	});
}

function storeDomain() {
	var color = "red";
	var alertBorderWidth = 10;
	var alertPx;
	var alertPy;
	color = document.getElementById('colorDisplay').innerHTML;
	primaryColor = document.getElementById('primaryColorSelected').value;
	
	if (document.getElementById('alertBorderWidthInput') != null && !isNaN(document.getElementById('alertBorderWidthInput').value)) {
		alertBorderWidth = document.getElementById('alertBorderWidthInput').value;
	}
	alertPx = document.getElementById('primaryDragPointer').style.left;
	alertPy = document.getElementById('secondaryDragPointer').style.left;
	chrome.tabs.getSelected(null, function(tab) {sendMessageToStoreDomain(tab, true, color, alertBorderWidth, primaryColor, alertPx, alertPy)});
}

function removeDomain() {
	chrome.tabs.getSelected(null, function(tab) {sendMessageToStoreDomain(tab, false, "red", 10, "red")});
}

function sendMessageToStoreDomain(tab, flag, color, alertBorderWidth, primaryColor, alertPx, alertPy) {
	chrome.tabs.sendMessage(tab.id, {isAlertDomain: flag, requestingUrl: tab.url, color: color, alertBorderWidth: alertBorderWidth, alertPrimaryColor: primaryColor, alertPx: alertPx, alertPy: alertPy}, function(response) {
		chrome.tabs.update(tab.id, {"url" : tab.url});
	});
	window.close();
}

function drawColorBar() {	
	isAlreadySaved();
	var canvas = document.getElementById('primaryColorBar');
	var context = canvas.getContext('2d');
	var fillStyle = context.createLinearGradient(0, 0, canvas.width, 0);
	fillStyle.addColorStop(0, "#FF0000");
	fillStyle.addColorStop((1/6), "#FFFC00");
	fillStyle.addColorStop(((1/6)*2), "#00FF00");
	fillStyle.addColorStop(((1/6)*3), "#00FFFF");
	fillStyle.addColorStop(((1/6)*4), "#0000FF");
	fillStyle.addColorStop(((1/6)*5), "#FF00FF");
	fillStyle.addColorStop(1, "#FF0000");
	context.fillStyle = fillStyle;
	context.fillRect(0, 0, canvas.width, canvas.height);
	canvas.addEventListener('click', updateColorBars);
	
}

function updateColorBars(event) {
	if (event.button == 0) {
		if (event.target.id.substr(0,1).toLowerCase() == 'p') {
			document.getElementById('primaryDragPointer').style.left = event.offsetX + 42 + "px";
		} else {
			document.getElementById('secondaryDragPointer').style.left = event.offsetX + 42 + "px";
		}
	}
	var xCoord = event.offsetX;
	var red, green, blue, colorString;
	var clickedPixel = event.target.getContext('2d').getImageData(xCoord, 5, 1, 1);
	red = clickedPixel.data[0].toString(16).length < 2 ? "0" + clickedPixel.data[0].toString(16).toUpperCase() : clickedPixel.data[0].toString(16).toUpperCase();
	green = clickedPixel.data[1].toString(16).length < 2 ? "0" + clickedPixel.data[1].toString(16).toUpperCase() : clickedPixel.data[1].toString(16).toUpperCase();
	blue = clickedPixel.data[2].toString(16).length < 2 ? "0" + clickedPixel.data[2].toString(16).toUpperCase() : clickedPixel.data[2].toString(16).toUpperCase();

	colorString = "#" + red + green + blue;
	updateColorDisplay(colorString);
	
	if (event.target.id == 'primaryColorBar') {
		updateSecondaryColorBar(colorString);
		document.getElementById('primaryColorSelected').value = colorString;
	}
}

function updateColorDisplay(colorString) {
	document.getElementById('colorDisplay').style.backgroundColor = colorString;
	document.getElementById('colorDisplay').innerHTML = colorString;
}

function updateSecondaryColorBar(colorString) {
	document.getElementById('secondaryDragPointer').style.left = "296px";
	var canvas = document.getElementById('secondaryColorBar');
	var context = canvas.getContext('2d');
	var fillStyle = context.createLinearGradient(0, 0, canvas.width, 0);
	fillStyle.addColorStop(0, 'black');
	fillStyle.addColorStop(0.5, colorString);
	fillStyle.addColorStop(1, 'white');
	context.fillStyle = fillStyle;
	context.fillRect(0, 0, canvas.width, canvas.height);
	canvas.addEventListener('click', updateColorBars);
}







